
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <script src="iconfont.js"></script>

    <style type="text/css">
        .icon {
          /* 通过设置 font-size 来改变图标大小 */
          width: 1em; height: 1em;
          /* 图标和文字相邻时，垂直对齐 */
          vertical-align: -0.15em;
          /* 通过设置 color 来改变 SVG 的颜色/fill */
          fill: currentColor;
          /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
             normalize.css 中也包含这行 */
          overflow: hidden;
        }

    </style>
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-phone"></use>
                    </svg>
                    <div class="name">手机</div>
                    <div class="fontclass">#icon-phone</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-upload"></use>
                    </svg>
                    <div class="name">上传</div>
                    <div class="fontclass">#icon-upload</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-recover"></use>
                    </svg>
                    <div class="name">恢复</div>
                    <div class="fontclass">#icon-recover</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-browser"></use>
                    </svg>
                    <div class="name">浏览器</div>
                    <div class="fontclass">#icon-browser</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-clear"></use>
                    </svg>
                    <div class="name">清除</div>
                    <div class="fontclass">#icon-clear</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-money"></use>
                    </svg>
                    <div class="name">人民币</div>
                    <div class="fontclass">#icon-money</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-question-mark"></use>
                    </svg>
                    <div class="name">帮助</div>
                    <div class="fontclass">#icon-question-mark</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-email"></use>
                    </svg>
                    <div class="name">邮件</div>
                    <div class="fontclass">#icon-email</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-sort"></use>
                    </svg>
                    <div class="name">下移</div>
                    <div class="fontclass">#icon-sort</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-loading"></use>
                    </svg>
                    <div class="name">加载</div>
                    <div class="fontclass">#icon-loading</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-refresh"></use>
                    </svg>
                    <div class="name">刷新</div>
                    <div class="fontclass">#icon-refresh</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-trash"></use>
                    </svg>
                    <div class="name">删除</div>
                    <div class="fontclass">#icon-trash</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-edit"></use>
                    </svg>
                    <div class="name">编辑</div>
                    <div class="fontclass">#icon-edit</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-close"></use>
                    </svg>
                    <div class="name">关闭</div>
                    <div class="fontclass">#icon-close</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-sina"></use>
                    </svg>
                    <div class="name">新浪</div>
                    <div class="fontclass">#icon-sina</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-qqkongjian"></use>
                    </svg>
                    <div class="name">QQ</div>
                    <div class="fontclass">#icon-qqkongjian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-link"></use>
                    </svg>
                    <div class="name">链接</div>
                    <div class="fontclass">#icon-link</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-eraser"></use>
                    </svg>
                    <div class="name">清除</div>
                    <div class="fontclass">#icon-eraser</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-like"></use>
                    </svg>
                    <div class="name">点赞</div>
                    <div class="fontclass">#icon-like</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-count"></use>
                    </svg>
                    <div class="name">统计</div>
                    <div class="fontclass">#icon-count</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-copy"></use>
                    </svg>
                    <div class="name">复制</div>
                    <div class="fontclass">#icon-copy</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-move"></use>
                    </svg>
                    <div class="name">移动</div>
                    <div class="fontclass">#icon-move</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-eye"></use>
                    </svg>
                    <div class="name">查看</div>
                    <div class="fontclass">#icon-eye</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-click"></use>
                    </svg>
                    <div class="name">点击</div>
                    <div class="fontclass">#icon-click</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-click-rate"></use>
                    </svg>
                    <div class="name">点击率</div>
                    <div class="fontclass">#icon-click-rate</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-page-view"></use>
                    </svg>
                    <div class="name">访问量</div>
                    <div class="fontclass">#icon-page-view</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-add"></use>
                    </svg>
                    <div class="name">增加</div>
                    <div class="fontclass">#icon-add</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wechat"></use>
                    </svg>
                    <div class="name">微信</div>
                    <div class="fontclass">#icon-wechat</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-star"></use>
                    </svg>
                    <div class="name">五角星</div>
                    <div class="fontclass">#icon-star</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-calendar"></use>
                    </svg>
                    <div class="name">日历</div>
                    <div class="fontclass">#icon-calendar</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-ticket"></use>
                    </svg>
                    <div class="name">优惠劵</div>
                    <div class="fontclass">#icon-ticket</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dele"></use>
                    </svg>
                    <div class="name">删除</div>
                    <div class="fontclass">#icon-dele</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-home"></use>
                    </svg>
                    <div class="name">主页</div>
                    <div class="fontclass">#icon-home</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shop"></use>
                    </svg>
                    <div class="name">店铺</div>
                    <div class="fontclass">#icon-shop</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-finish"></use>
                    </svg>
                    <div class="name">成功</div>
                    <div class="fontclass">#icon-finish</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-rightarrow"></use>
                    </svg>
                    <div class="name">箭头</div>
                    <div class="fontclass">#icon-rightarrow</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-broadcast"></use>
                    </svg>
                    <div class="name">广播</div>
                    <div class="fontclass">#icon-broadcast</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-taobaowang"></use>
                    </svg>
                    <div class="name">淘宝网</div>
                    <div class="fontclass">#icon-taobaowang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yihaodian"></use>
                    </svg>
                    <div class="name">一号店</div>
                    <div class="fontclass">#icon-yihaodian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dangdangwang"></use>
                    </svg>
                    <div class="name">当当网</div>
                    <div class="fontclass">#icon-dangdangwang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-rename"></use>
                    </svg>
                    <div class="name">重命名</div>
                    <div class="fontclass">#icon-rename</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jingdong"></use>
                    </svg>
                    <div class="name">京东</div>
                    <div class="fontclass">#icon-jingdong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-suningyigou"></use>
                    </svg>
                    <div class="name">苏宁易购</div>
                    <div class="fontclass">#icon-suningyigou</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fullscreen"></use>
                    </svg>
                    <div class="name">全屏</div>
                    <div class="fontclass">#icon-fullscreen</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-narrow"></use>
                    </svg>
                    <div class="name">缩小</div>
                    <div class="fontclass">#icon-narrow</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-search"></use>
                    </svg>
                    <div class="name">搜索</div>
                    <div class="fontclass">#icon-search</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-caution"></use>
                    </svg>
                    <div class="name">警示</div>
                    <div class="fontclass">#icon-caution</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-calendar1"></use>
                    </svg>
                    <div class="name">日历</div>
                    <div class="fontclass">#icon-calendar1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-exchange"></use>
                    </svg>
                    <div class="name">替换</div>
                    <div class="fontclass">#icon-exchange</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-arrow"></use>
                    </svg>
                    <div class="name">下拉箭头</div>
                    <div class="fontclass">#icon-arrow</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-lastpage"></use>
                    </svg>
                    <div class="name">最后页</div>
                    <div class="fontclass">#icon-lastpage</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-nextpage"></use>
                    </svg>
                    <div class="name">下一页</div>
                    <div class="fontclass">#icon-nextpage</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-poor-review"></use>
                    </svg>
                    <div class="name">差评</div>
                    <div class="fontclass">#icon-poor-review</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-good-review"></use>
                    </svg>
                    <div class="name">好评</div>
                    <div class="fontclass">#icon-good-review</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-medium-review"></use>
                    </svg>
                    <div class="name">中评</div>
                    <div class="fontclass">#icon-medium-review</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-remark"></use>
                    </svg>
                    <div class="name">备注</div>
                    <div class="fontclass">#icon-remark</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wangwang"></use>
                    </svg>
                    <div class="name">旺旺</div>
                    <div class="fontclass">#icon-wangwang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-right"></use>
                    </svg>
                    <div class="name">对</div>
                    <div class="fontclass">#icon-right</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-flag"></use>
                    </svg>
                    <div class="name">旗子</div>
                    <div class="fontclass">#icon-flag</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-stick"></use>
                    </svg>
                    <div class="name">置顶</div>
                    <div class="fontclass">#icon-stick</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-crown"></use>
                    </svg>
                    <div class="name">王冠</div>
                    <div class="fontclass">#icon-crown</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-subtract"></use>
                    </svg>
                    <div class="name">减</div>
                    <div class="fontclass">#icon-subtract</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-succeed"></use>
                    </svg>
                    <div class="name">succeed</div>
                    <div class="fontclass">#icon-succeed</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-radio"></use>
                    </svg>
                    <div class="name">单选待选</div>
                    <div class="fontclass">#icon-radio</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-radio-checked"></use>
                    </svg>
                    <div class="name">单选已选中</div>
                    <div class="fontclass">#icon-radio-checked</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-checkbox"></use>
                    </svg>
                    <div class="name">多选待选</div>
                    <div class="fontclass">#icon-checkbox</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-checkbox-checked"></use>
                    </svg>
                    <div class="name">多选已选中</div>
                    <div class="fontclass">#icon-checkbox-checked</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-indeterminate"></use>
                    </svg>
                    <div class="name">半选中</div>
                    <div class="fontclass">#icon-indeterminate</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-upload1"></use>
                    </svg>
                    <div class="name">上传</div>
                    <div class="fontclass">#icon-upload1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-background-color"></use>
                    </svg>
                    <div class="name">纯色背景</div>
                    <div class="fontclass">#icon-background-color</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-return"></use>
                    </svg>
                    <div class="name">箭头</div>
                    <div class="fontclass">#icon-return</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-target"></use>
                    </svg>
                    <div class="name">目标</div>
                    <div class="fontclass">#icon-target</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-people"></use>
                    </svg>
                    <div class="name">人数</div>
                    <div class="fontclass">#icon-people</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-package"></use>
                    </svg>
                    <div class="name">包裹</div>
                    <div class="fontclass">#icon-package</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-refund"></use>
                    </svg>
                    <div class="name">退款</div>
                    <div class="fontclass">#icon-refund</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-clock"></use>
                    </svg>
                    <div class="name">闹钟</div>
                    <div class="fontclass">#icon-clock</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-ju"></use>
                    </svg>
                    <div class="name">聚划算</div>
                    <div class="fontclass">#icon-ju</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-cargo"></use>
                    </svg>
                    <div class="name">货物</div>
                    <div class="fontclass">#icon-cargo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-success-order"></use>
                    </svg>
                    <div class="name">订单成功</div>
                    <div class="fontclass">#icon-success-order</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-close-order"></use>
                    </svg>
                    <div class="name">关闭订单</div>
                    <div class="fontclass">#icon-close-order</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-order"></use>
                    </svg>
                    <div class="name">订单</div>
                    <div class="fontclass">#icon-order</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-express-car"></use>
                    </svg>
                    <div class="name">快递车</div>
                    <div class="fontclass">#icon-express-car</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-Courier"></use>
                    </svg>
                    <div class="name">快递员</div>
                    <div class="fontclass">#icon-Courier</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-pay"></use>
                    </svg>
                    <div class="name">支付</div>
                    <div class="fontclass">#icon-pay</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-building"></use>
                    </svg>
                    <div class="name">房子</div>
                    <div class="fontclass">#icon-building</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-turn"></use>
                    </svg>
                    <div class="name">流转</div>
                    <div class="fontclass">#icon-turn</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-exclamation-mark"></use>
                    </svg>
                    <div class="name">感叹号</div>
                    <div class="fontclass">#icon-exclamation-mark</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-sync"></use>
                    </svg>
                    <div class="name">同步</div>
                    <div class="fontclass">#icon-sync</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-folder"></use>
                    </svg>
                    <div class="name">文件夹</div>
                    <div class="fontclass">#icon-folder</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-add-folder"></use>
                    </svg>
                    <div class="name">新建文件</div>
                    <div class="fontclass">#icon-add-folder</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-more"></use>
                    </svg>
                    <div class="name">展开</div>
                    <div class="fontclass">#icon-more</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tag"></use>
                    </svg>
                    <div class="name">标签</div>
                    <div class="fontclass">#icon-tag</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bell"></use>
                    </svg>
                    <div class="name">铃铛</div>
                    <div class="fontclass">#icon-bell</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-editorial-background"></use>
                    </svg>
                    <div class="name">编辑背景</div>
                    <div class="fontclass">#icon-editorial-background</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-able"></use>
                    </svg>
                    <div class="name">成功</div>
                    <div class="fontclass">#icon-able</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-diable"></use>
                    </svg>
                    <div class="name">不符合</div>
                    <div class="fontclass">#icon-diable</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-export"></use>
                    </svg>
                    <div class="name">导出</div>
                    <div class="fontclass">#icon-export</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-view-list"></use>
                    </svg>
                    <div class="name">查看列表</div>
                    <div class="fontclass">#icon-view-list</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-set-up"></use>
                    </svg>
                    <div class="name">设置</div>
                    <div class="fontclass">#icon-set-up</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-basic-information"></use>
                    </svg>
                    <div class="name">基本信息</div>
                    <div class="fontclass">#icon-basic-information</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-interaction"></use>
                    </svg>
                    <div class="name">相互作用</div>
                    <div class="fontclass">#icon-interaction</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-view-chart"></use>
                    </svg>
                    <div class="name">查看图表</div>
                    <div class="fontclass">#icon-view-chart</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shoppingcart"></use>
                    </svg>
                    <div class="name">购物车</div>
                    <div class="fontclass">#icon-shoppingcart</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-customer"></use>
                    </svg>
                    <div class="name">顾客</div>
                    <div class="fontclass">#icon-customer</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-invite-collect"></use>
                    </svg>
                    <div class="name">邀请收藏</div>
                    <div class="fontclass">#icon-invite-collect</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-collect-goods"></use>
                    </svg>
                    <div class="name">收藏商品</div>
                    <div class="fontclass">#icon-collect-goods</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-collect-shop"></use>
                    </svg>
                    <div class="name">收藏店铺</div>
                    <div class="fontclass">#icon-collect-shop</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shopping-cart"></use>
                    </svg>
                    <div class="name">购物车</div>
                    <div class="fontclass">#icon-shopping-cart</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-man"></use>
                    </svg>
                    <div class="name">人</div>
                    <div class="fontclass">#icon-man</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-browse-goods"></use>
                    </svg>
                    <div class="name">浏览商品</div>
                    <div class="fontclass">#icon-browse-goods</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-lottery"></use>
                    </svg>
                    <div class="name">抽奖</div>
                    <div class="fontclass">#icon-lottery</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shift"></use>
                    </svg>
                    <div class="name">切换</div>
                    <div class="fontclass">#icon-shift</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-hide"></use>
                    </svg>
                    <div class="name">隐藏</div>
                    <div class="fontclass">#icon-hide</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-appear"></use>
                    </svg>
                    <div class="name">显示</div>
                    <div class="fontclass">#icon-appear</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-card"></use>
                    </svg>
                    <div class="name">会员卡</div>
                    <div class="fontclass">#icon-card</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-location"></use>
                    </svg>
                    <div class="name">定位</div>
                    <div class="fontclass">#icon-location</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-lock"></use>
                    </svg>
                    <div class="name">锁</div>
                    <div class="fontclass">#icon-lock</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-all"></use>
                    </svg>
                    <div class="name">全部</div>
                    <div class="fontclass">#icon-all</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-create-orders"></use>
                    </svg>
                    <div class="name">新建工单</div>
                    <div class="fontclass">#icon-create-orders</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-pause"></use>
                    </svg>
                    <div class="name">终止</div>
                    <div class="fontclass">#icon-pause</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-qrcode"></use>
                    </svg>
                    <div class="name">二维码</div>
                    <div class="fontclass">#icon-qrcode</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-new"></use>
                    </svg>
                    <div class="name">新</div>
                    <div class="fontclass">#icon-new</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-line-star"></use>
                    </svg>
                    <div class="name">空心五角星</div>
                    <div class="fontclass">#icon-line-star</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-details"></use>
                    </svg>
                    <div class="name">明细</div>
                    <div class="fontclass">#icon-details</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-user-information"></use>
                    </svg>
                    <div class="name">用户信息</div>
                    <div class="fontclass">#icon-user-information</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-invited"></use>
                    </svg>
                    <div class="name">邀</div>
                    <div class="fontclass">#icon-invited</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shop1"></use>
                    </svg>
                    <div class="name">店铺</div>
                    <div class="fontclass">#icon-shop1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-file"></use>
                    </svg>
                    <div class="name">文件</div>
                    <div class="fontclass">#icon-file</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-more1"></use>
                    </svg>
                    <div class="name">更多</div>
                    <div class="fontclass">#icon-more1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-info"></use>
                    </svg>
                    <div class="name">信息</div>
                    <div class="fontclass">#icon-info</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dialogfill"></use>
                    </svg>
                    <div class="name">对话</div>
                    <div class="fontclass">#icon-dialogfill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-purse"></use>
                    </svg>
                    <div class="name">钱袋</div>
                    <div class="fontclass">#icon-purse</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gather"></use>
                    </svg>
                    <div class="name">聚划算</div>
                    <div class="fontclass">#icon-gather</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-product"></use>
                    </svg>
                    <div class="name">商品</div>
                    <div class="fontclass">#icon-product</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-precent"></use>
                    </svg>
                    <div class="name">百分号</div>
                    <div class="fontclass">#icon-precent</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-number-full"></use>
                    </svg>
                    <div class="name">手机号</div>
                    <div class="fontclass">#icon-number-full</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-time"></use>
                    </svg>
                    <div class="name">时间</div>
                    <div class="fontclass">#icon-time</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-system"></use>
                    </svg>
                    <div class="name">系统</div>
                    <div class="fontclass">#icon-system</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-topic"></use>
                    </svg>
                    <div class="name">话题</div>
                    <div class="fontclass">#icon-topic</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-statistic"></use>
                    </svg>
                    <div class="name">统计</div>
                    <div class="fontclass">#icon-statistic</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-timing"></use>
                    </svg>
                    <div class="name">计时</div>
                    <div class="fontclass">#icon-timing</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-reserve"></use>
                    </svg>
                    <div class="name">定金</div>
                    <div class="fontclass">#icon-reserve</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-part"></use>
                    </svg>
                    <div class="name">部分</div>
                    <div class="fontclass">#icon-part</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-taobao-fill"></use>
                    </svg>
                    <div class="name">淘宝</div>
                    <div class="fontclass">#icon-taobao-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-RMB"></use>
                    </svg>
                    <div class="name">人民币</div>
                    <div class="fontclass">#icon-RMB</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-consume"></use>
                    </svg>
                    <div class="name">消耗绩点</div>
                    <div class="fontclass">#icon-consume</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-mail"></use>
                    </svg>
                    <div class="name">邮件</div>
                    <div class="fontclass">#icon-mail</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gain"></use>
                    </svg>
                    <div class="name">获得绩点</div>
                    <div class="fontclass">#icon-gain</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-goods"></use>
                    </svg>
                    <div class="name">商品</div>
                    <div class="fontclass">#icon-goods</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-checked-tri"></use>
                    </svg>
                    <div class="name">选中</div>
                    <div class="fontclass">#icon-checked-tri</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-single-sign-on"></use>
                    </svg>
                    <div class="name">单点登录</div>
                    <div class="fontclass">#icon-single-sign-on</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-Final-Payment"></use>
                    </svg>
                    <div class="name">尾款</div>
                    <div class="fontclass">#icon-Final-Payment</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-forward-sale"></use>
                    </svg>
                    <div class="name">预售</div>
                    <div class="fontclass">#icon-forward-sale</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-perspective"></use>
                    </svg>
                    <div class="name">透视</div>
                    <div class="fontclass">#icon-perspective</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-pen"></use>
                    </svg>
                    <div class="name">笔</div>
                    <div class="fontclass">#icon-pen</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-process"></use>
                    </svg>
                    <div class="name">设计中</div>
                    <div class="fontclass">#icon-process</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhihangzhong"></use>
                    </svg>
                    <div class="name">执行中</div>
                    <div class="fontclass">#icon-zhihangzhong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-pend"></use>
                    </svg>
                    <div class="name">待审批</div>
                    <div class="fontclass">#icon-pend</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-complete"></use>
                    </svg>
                    <div class="name">完成</div>
                    <div class="fontclass">#icon-complete</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-warning"></use>
                    </svg>
                    <div class="name">出错</div>
                    <div class="fontclass">#icon-warning</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-evaluate"></use>
                    </svg>
                    <div class="name">评价</div>
                    <div class="fontclass">#icon-evaluate</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-customer_info"></use>
                    </svg>
                    <div class="name">客户信息</div>
                    <div class="fontclass">#icon-customer_info</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-description"></use>
                    </svg>
                    <div class="name">描述</div>
                    <div class="fontclass">#icon-description</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-return-express"></use>
                    </svg>
                    <div class="name">逆向物流</div>
                    <div class="fontclass">#icon-return-express</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-trial-good"></use>
                    </svg>
                    <div class="name">试用</div>
                    <div class="fontclass">#icon-trial-good</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-export1"></use>
                    </svg>
                    <div class="name">导出</div>
                    <div class="fontclass">#icon-export1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-leadin"></use>
                    </svg>
                    <div class="name">导入</div>
                    <div class="fontclass">#icon-leadin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-warning1"></use>
                    </svg>
                    <div class="name">警告</div>
                    <div class="fontclass">#icon-warning1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-luckbag"></use>
                    </svg>
                    <div class="name">福袋</div>
                    <div class="fontclass">#icon-luckbag</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-lose_picture"></use>
                    </svg>
                    <div class="name">图片加载失败</div>
                    <div class="fontclass">#icon-lose_picture</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-award-title"></use>
                    </svg>
                    <div class="name">题名</div>
                    <div class="fontclass">#icon-award-title</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-lock1"></use>
                    </svg>
                    <div class="name">锁</div>
                    <div class="fontclass">#icon-lock1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-circle-spot"></use>
                    </svg>
                    <div class="name">圆形-热点</div>
                    <div class="fontclass">#icon-circle-spot</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-square-spot"></use>
                    </svg>
                    <div class="name">方形-热点</div>
                    <div class="fontclass">#icon-square-spot</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-message"></use>
                    </svg>
                    <div class="name">短信</div>
                    <div class="fontclass">#icon-message</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-statistics"></use>
                    </svg>
                    <div class="name">统计</div>
                    <div class="fontclass">#icon-statistics</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-cry"></use>
                    </svg>
                    <div class="name">哭</div>
                    <div class="fontclass">#icon-cry</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-normal"></use>
                    </svg>
                    <div class="name">一般</div>
                    <div class="fontclass">#icon-normal</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-smile"></use>
                    </svg>
                    <div class="name">笑</div>
                    <div class="fontclass">#icon-smile</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-share"></use>
                    </svg>
                    <div class="name">分享</div>
                    <div class="fontclass">#icon-share</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shop11"></use>
                    </svg>
                    <div class="name">店铺</div>
                    <div class="fontclass">#icon-shop11</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-diannao"></use>
                    </svg>
                    <div class="name">电脑</div>
                    <div class="fontclass">#icon-diannao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tips"></use>
                    </svg>
                    <div class="name">提示</div>
                    <div class="fontclass">#icon-tips</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dengluerweima"></use>
                    </svg>
                    <div class="name">登录二维码</div>
                    <div class="fontclass">#icon-dengluerweima</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dengludiannao"></use>
                    </svg>
                    <div class="name">登录电脑</div>
                    <div class="fontclass">#icon-dengludiannao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-cl-yhd"></use>
                    </svg>
                    <div class="name">一号店</div>
                    <div class="fontclass">#icon-cl-yhd</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-cl-sn"></use>
                    </svg>
                    <div class="name">苏宁</div>
                    <div class="fontclass">#icon-cl-sn</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-cl-jd"></use>
                    </svg>
                    <div class="name">京东</div>
                    <div class="fontclass">#icon-cl-jd</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-cl-wx"></use>
                    </svg>
                    <div class="name">微信</div>
                    <div class="fontclass">#icon-cl-wx</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-cl-tb"></use>
                    </svg>
                    <div class="name">淘宝</div>
                    <div class="fontclass">#icon-cl-tb</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-cl-dd"></use>
                    </svg>
                    <div class="name">当当</div>
                    <div class="fontclass">#icon-cl-dd</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-cl-tm"></use>
                    </svg>
                    <div class="name">天猫</div>
                    <div class="fontclass">#icon-cl-tm</div>
                </li>
            
        </ul>


        <h2 id="symbol-">symbol引用</h2>
        <hr>

        <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
        这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：</p>
        <ul>
          <li>支持多色图标了，不再受单色限制。</li>
          <li>通过一些技巧，支持像字体那样，通过<code>font-size</code>,<code>color</code>来调整样式。</li>
          <li>兼容性较差，支持 ie9+,及现代浏览器。</li>
          <li>浏览器渲染svg的性能一般，还不如png。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-symbol-">第一步：引入项目下面生成的symbol代码：</h3>
        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;</span></code></pre>
        <h3 id="-css-">第二步：加入通用css代码（引入一次就行）：</h3>
        <pre><code class="lang-js hljs javascript">&lt;style type=<span class="hljs-string">"text/css"</span>&gt;
.icon {
   width: <span class="hljs-number">1</span>em; height: <span class="hljs-number">1</span>em;
   vertical-align: <span class="hljs-number">-0.15</span>em;
   fill: currentColor;
   overflow: hidden;
}
&lt;<span class="hljs-regexp">/style&gt;</span></code></pre>
        <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-js hljs javascript">&lt;svg <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"icon"</span> aria-hidden=<span class="hljs-string">"true"</span>&gt;<span class="xml"><span class="hljs-tag">
  &lt;<span class="hljs-name">use</span> <span class="hljs-attr">xlink:href</span>=<span class="hljs-string">"#icon-xxx"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">use</span>&gt;</span>
</span>&lt;<span class="hljs-regexp">/svg&gt;
        </span></code></pre>
    </div>
</body>
</html>
